<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    1. 目前互联网web项目一般都是前后端分离的。后台提供接口，前端通过ajax调用接口，发送请求，获取数据。
</p>
<p>
    在开发的时候，使用ajax进行处理的时候，常用的方式有如下几种：

    1. 使用原生的ajax进行操作

    2. 使用jquery提供的ajax方法

    3. 使用 axios这样的工具库进行实现

</p>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

<button id="getDataBtn">点击获取服务器的数据</button>
<div id="container">
    <!--<ul>
        <li>序号：</li>
        <li>新闻标题：</li>
        <li>新闻封面图：</li>
        <li>新闻作者：</li>
        <li>新闻流量量：</li>
    </ul>-->
</div>
</body>

<script type="text/javascript">
    var oBtn = document.getElementById('getDataBtn');
    oBtn.onclick = function () {
        // 点击后发送网络请求
        // 1. ajax对象 2. 请求的接口地址
        var url = 'https://yw.52kfw.cn/api/news/flist?pageSize=100&cate_id=%E5%9B%BD%E5%AE%B6%E4%BA%8B%E5%AE%9E'; // 国家事实
        let url1 = 'https://yw.52kfw.cn/api/news/flist?pageSize=100&cate_id=%E7%A7%91%E6%8A%80%E5%85%B4%E5%9B%BD'; // 科技强国


        /* 使用jquery提供的ajax进行网络请求*/
        $.ajax({
            url: url,
            dataType: 'json',
            success: function (obj) {
                console.log(obj);

                if (obj.statusCode == 200) {
                    var newsList = obj.data.list;
                    var html = ``;

                    newsList.forEach(function (ele, index) {
                        html += `<ul>
                                <li>序号：${ele._id}</li>
                                <li>新闻标题：${ele.title}</li>
                                <li>新闻封面图：<img src="https://yw.52kfw.cn${ele.imageUrl}" alt=""></li>
                                <li>新闻作者：${ele.author}</li>
                                <li>新闻流量量：${ele.viewCount}</li>
                            </ul>`;
                    })

                    document.getElementById('container').innerHTML = html;

                } else {
                    alert('系统繁忙！');
                }


            }
        })

        // ajax发送请求
        /*var xhr = new XMLHttpRequest();

        xhr.open('get', url);

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                // console.log(xhr.responseText);
                var obj = JSON.parse(xhr.responseText);
                console.log(obj);
                if (obj.statusCode == 200) {
                    var newsList = obj.data.list;
                    var html = ``;

                    newsList.forEach(function (ele, index) {
                        html += `<ul>
                                <li>序号：${ele._id}</li>
                                <li>新闻标题：${ele.title}</li>
                                <li>新闻封面图：<img src="https://yw.52kfw.cn${ele.imageUrl}" alt=""></li>
                                <li>新闻作者：${ele.author}</li>
                                <li>新闻流量量：${ele.viewCount}</li>
                            </ul>`;
                    })

                    document.getElementById('container').innerHTML = html;

                } else {
                    alert('系统繁忙！');
                }
            }
        }

        xhr.send();*/


    }
</script>

</html>
